<template>
  <div class="container">
    <el-container>
      <el-header><Header/></el-header>
      <el-container>
        <el-aside width="2rem"><Aside/></el-aside>
        <el-container>
          <el-main><Content/></el-main>
          <el-footer><Footer/></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import Header from "./main/Header"
  import Content from "./main/Content"
  import Aside from "./main/Aside"
  import Footer from "./main/Footer"
  export default {
    name: "Main",
    components: {Header, Content, Aside, Footer}
  }
</script>

<style lang="stylus" scoped>
.container
  font-size: .16rem
.el-header, .el-footer
  background-color: #B3C0D1
  color: #333
  text-align: center
  line-height: .6rem
.el-aside
  background-color: #D3DCE6
  color: #333
  text-align: center
  line-height: 2rem
.el-main
  height: 6.6rem
  background-color: #E9EEF3
  color: #333
  text-align: center
  line-height: 1.6rem
body > .el-container
  margin-bottom: .4rem
  line-height: 2.6rem
</style>
